<template>
    <div class="the-end defaultBackground">
        <div class="end-content">
            <div class="logo"></div>
            <div class="text-top">
                <p>医疗设备全息管理引擎</p>
                <p>专注医疗设备管理服务</p>
                <p>用大数据创造未来</p>
                <hr />
            </div>
            <div class="text-bottom">
                <p>17年感恩</p>
                <p>18年我们再战</p>
            </div>
            <a class="apply-btn" v-on:click="showApplyContainer">申请试用【医信云服】</a>
            <div class="other-btn clear">
                <a class="go-btn replay-btn" v-on:click="toReplay()" id="replay-btn">重播</a>
                <a class="go-btn" v-on:click="showSharedContainer">我要分享</a>
            </div>
            <div class="two-code">
                <p>BIG-DATA</p>
                <p>BOOT SERVICE</p>
                <img src="../../assets/images/two-code.png"/>
            </div>
            <div class="music-area">
                <!--<audio id="musicid" src="http://121.42.187.170/dist/year.mp3" preload="preload" autoplay="autoplay"  loop="loop">您的浏览器不支持 audio标签。</audio>-->
                <!--<audio src="http://121.42.187.170/dist/year.mp3" autoplay preload loop="loop" />-->
                <audio src="http://121.42.187.170/dist/yeard12.mp3" autoplay loop id="music" >
                    您的浏览器不支持 audio 标签。
                </audio>
            </div>
        </div>
        <div class="apply-container" id="apply-container" v-on:click="hiddenApplyContainer">
            <div class="apply-inner " id="apply-inner" v-on:click="stopPropagation($event)">
                <h2>试用信息填写</h2>
                <ul class="input-list">
                    <li class="">
                        <input placeholder="姓名" class="user-name"/>
                        <span>*</span>
                    </li>
                    <li class="">
                        <input placeholder="医院名称" class="hos-name"/>
                        <span>*</span>
                    </li>
                    <li class="">
                        <input placeholder="职务" class="job"/>
                    </li>
                    <li class="">
                        <input placeholder="电话" class="tel"/>
                    </li>
                    <li class="">
                        <input value="提交" type="button" class="apply-commit-btn" v-on:click="toApply" />
                    </li>
                </ul>
            </div>

        </div>
        <div class="shared-box">
            <div class="shared-bg shared-container" id="shared-container">
            </div>
            <div class="shared-container">
                <div class="close-btn" v-on:click="hiddenSharedContainer">
                </div>
                <div class="shared-btn">
                    <p>点击右上角</p>
                    <p>分享给朋友</p>
                </div>
                <div class="shared-line"></div>
            </div>
        </div>

    </div>
</template>
<script type="text/javascript">
    import $ from 'jquery'
    export default {
        props: {
            hosId: {
                type: [String, Number]
            },
            doReplay: {
                type: Function
            }
        },
        data () {
            return {}
        },
        mounted () {
            this.music('music')
        },
        methods: {
            music (id) {
                var audio = document.getElementById(id),
                play = function(){
                    audio.play();
                    document.removeEventListener("touchstart",play, false);
                };
                audio.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    play();
                }, false);
                document.addEventListener('YixinJSBridgeReady', function() {
                    play();
                }, false);
                document.addEventListener("touchstart",play, false);
            },
            toReplay () {
                this.doReplay()
            },
            stopPropagation (event) {
                console.log('不会冒泡')
                event.stopPropagation();
            },
            hiddenApplyContainer () {
                $(".apply-container").removeClass('show-apply-container')
            },
            showApplyContainer () {
                $(".apply-container").addClass('show-apply-container')
            },
            hiddenSharedContainer () {
                $(".shared-box").removeClass('show-apply-container')
            },
            showSharedContainer () {
                $(".shared-box").addClass('show-apply-container')
                this.doInsermusic_icontMessage('分享')
            },
            doInsertMessage (type) {
                let that = this
                let time = new Date().getTime()
                let data = {
                    hospitalId: that.hosId,
                    time: time,
                    type:type
                }
                $.ajax({
                    url:'http://121.42.187.170/h5/insertMess',
                    data:JSON.stringify(data),
                    method:'post',
                    contentType:'application/json',
                    success:function (res) {
                    }
                })
            },
            toApply () {
                let user_name = $('.user-name')
                let hos_name = $('.hos-name')
                let job = $('.job')
                let tel = $('.tel')
                if(!user_name.val()){
                    return
                }
                if(!hos_name.val()){
                    return
                }
                let data = {
                    pName: user_name.val(),
                    hName: hos_name.val(),
                    duty: job.val(),
                    phone: tel.val()
                }
                let that = this
                $.ajax({
                    url:'http://121.42.187.170/h5/insert',
                    data:JSON.stringify(data),
                    method:'post',
                    contentType:'application/json',
                    success:function (res) {
                        if(res.success) {
                            that.hiddenApplyContainer()
                            that.doInsertMessage('申请')
                        }
                    }
                })
            }
        },
        components: {}
    }
</script>
<style lang='scss' rel="stylesheet/scss">
    .the-end{
        .music-area{
            display: none;
        }
        .end-content{
            width: 51%;
            height: 86%;
            position: absolute;
            left: 24.5%;
            top: 3%;
            .logo{
                background-image: url("../../assets/images/logo.png");
                width: 19rem;
                height: 6rem;
                background-size: 100% 100%;
                margin: 0 auto 24% auto;
            }
            .text-top{
                width: 100%;
                text-align: center;
                color: #0371f6;
                font-size: 1.8rem;
                line-height: 5rem;
                >p{
                    line-height: 3.2rem;
                }
                >hr{
                    width: 47%;
                    border: 2px solid #0371f6;
                    color: #0371f6;
                    margin: 4rem auto 0 auto;
                }
            }
            .text-bottom{
                text-align: center;
                color: #0371f6;
                font-size: 2.8rem;
                margin: 13% 0;
                >p{
                    line-height: 4.9rem;
                    letter-spacing: 2px;
                    font-weight: bold;
                }
            }
            .apply-btn{
                display: block;
                background-image: url("../../assets/images/apply-btn.png");
                width: 100%;
                height: 4.7rem;
                background-size: 100% 100%;
                color: #ffffff;
                text-align: center;
                line-height: 4.7rem;
                margin-top: 6rem;
                font-size: 2rem;
                letter-spacing: 6px;
                font-weight: normal;
            }
            .other-btn{
                width: 100%;
                height: 6rem;
                .go-btn{
                    width: 45%;
                    background-image: url("../../assets/images/apply-btn.png");
                    height: 4.7rem;
                    background-size: 100% 100%;
                    color: #ffffff;
                    text-align: center;
                    line-height: 4.7rem;
                    margin-top: 1rem;
                    font-size: 2rem;
                    letter-spacing: 6px;
                    font-weight: normal;
                    &:nth-child(1){
                        float: left;
                    }
                    &:nth-child(2){
                        float: right;
                    }
                }
            }
            .two-code{
                color: #0371f6;
                font-size: 2rem;
                text-align: center;
                margin: 20% 0 5% 0;
                >p{
                    font-family: 'DIGIT';
                    line-height: 2.6rem;
                    letter-spacing: 2px;
                }
                >img{
                    margin-top: 2rem;
                    width: 15rem;
                }
            }
        }
        .apply-container{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../../assets/images/apply-bg.png");
            background-size: 100% 100%;
            top:0;
            left: 0;
            overflow: hidden;
            z-index: 1000;
            transform: scale(0);
            .apply-inner{
                /*border: 1px solid #5af5ec;*/
                width: 82%;
                margin: 15% auto 0 auto;
                height: 82%;
                overflow: hidden;
                >h2{
                    font-size: 3rem;
                    text-align: center;
                    margin: 5% 0 5% 0;
                    color: #0371f6;
                    letter-spacing: 9px;
                }
                .input-list{
                    list-style: none;
                    height: 71%;
                    width: 85%;
                    margin: 10% auto 0 10%;
                    >li {
                        list-style: none;
                        height: 19%;
                        width: 100%;
                        position: relative;
                        &:nth-child(5){
                            height: 24%;
                        }
                        >span {
                            color: #fc4d4f;
                            position: absolute;
                            left: -5%;
                            font-size: 42px;
                            top: 67%;
                        }
                        >input{
                            width: 95%;
                            height: 46%;
                            padding-left: 5%;
                            border: 0;
                            border-radius: 20px;
                            background: #acc7f0;
                            color: #0371f6;
                            font-size: 2.2rem;
                            outline: none;
                            &.commit-btn{
                                width: 100%;
                            }
                        }
                        .apply-commit-btn{
                            display: inline-block;
                            background-image: url("../../assets/images/apply-btn.png");
                            width: 100%;
                            background-size: 100% 100%;
                            color: #ffffff;
                            text-align: center;
                            padding: 0;
                            letter-spacing: 2px;
                            height: 38%;
                            margin: 5% 0 0 0;
                        }
                    }
                }
            }

        }
        .shared-box{
            position: absolute;
            width: 100%;
            height: 100%;
            transform: scale(0);
            .shared-bg{
                position: absolute;
                width: 100%;
                height: 100%;
                background-color:#000;
                opacity: 0.6;
                top:0;
                left: 0;
                overflow: hidden;
                z-index: 1000;
            }
            .shared-container{
                position: absolute;
                width: 100%;
                height: 100%;
                top:0;
                left: 0;
                overflow: hidden;
                z-index: 1000;
                .close-btn{
                    position: absolute;
                    left: 2rem;
                    top: 2rem;
                    background-image: url("../../assets/images/close-bg.png");
                    background-size: 100% 100%;
                    width: 3.5rem;
                    height: 3.5rem;
                }
                .shared-btn {
                    width: 20rem;
                    height: 10rem;
                    text-align: center;
                    background-image: url("../../assets/images/shared-btn.png");
                    background-size: 100% 100%;
                    font-size: 1.6rem;
                    top: 50%;
                    position: absolute;
                    left: 50%;
                    margin: -5rem 0 0 -10rem;
                    >p{
                        color: #2eeec9;
                        letter-spacing: 2px;
                        font-size: 2rem;
                        font-weight: bold;
                        font-size: 2.3rem;
                        &:nth-child(2){
                            font-weight: bold;
                            font-size: 2.3rem;
                        }
                        &:nth-child(1){
                            font-weight: normal;
                            margin: 1.6rem 0 0 0;
                        }
                    }
                }
                .shared-line{
                    position: absolute;
                    width: 14rem;
                    height: 45%;
                    background-image: url("../../assets/images/shared-line.png");
                    background-size: 100% 100%;
                    right: 10%;
                    top: 0%;
                }
            }
        }

        .show-apply-container{
            animation:toScaleMax 0.2s linear;
            animation-fill-mode: forwards;
        }
    }
    input::-webkit-input-placeholder{
        color: #0371f6;
    }
    @keyframes toScaleMax {
        to {
            transform: scale(1);
        }
    }
</style>